<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="renderer" content="webkit" />
		<meta name="robots" content="index, follow" />
		<title>预约到店</title>
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<meta name="author" content="order by website" />
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
		 crossorigin="anonymous"></script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" media="screen" />
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.css" />
		<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
		<!-- 引入样式文件 -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css">

		<!-- 引入 Vue 和 Vant 的 JS 文件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>
	</head>
	<body>
		<div id="app">
			<div class="row">
				<div class="col-xs-12" style="padding: 0;">
					<van-sku v-model="show" :sku="sku" :goods="goods" :goods-id="goodsId" quota="0" quota-used="10"
					 :hide-stock="sku.hide_stock" :message-config="messageConfig"  />
				</div>
			</div>
		</div>
	</body>
</html>


<script>
	new Vue({
		el: '#app',
		data: function() {
			return {
				goodsId: '946755',
				show: true,
				sku: {
					// 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
					// 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
					tree: [{
						k: '颜色', // skuKeyName：规格类目名称
						v: [{
								id: '30349', // skuValueId：规格值 id
								name: '红色', // skuValueName：规格值名称
								imgUrl: 'https://img.yzcdn.cn/1.jpg', // 规格类目图片，只有第一个规格类目可以定义图片
								previewImgUrl: 'https://img.yzcdn.cn/1p.jpg', // 用于预览显示的规格类目图片
							},
							{
								id: '1215',
								name: '蓝色',
								imgUrl: 'https://img.yzcdn.cn/2.jpg',
								previewImgUrl: 'https://img.yzcdn.cn/2p.jpg',
							}
						],
						k_s: 's1' // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
					}],
					// 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
					list: [{
						id: 2259, // skuId，下单时后端需要
						price: 100, // 价格（单位分）
						s1: '1215', // 规格类目 k_s 为 s1 的对应规格值 id
						s2: '1193', // 规格类目 k_s 为 s2 的对应规格值 id
						s3: '0', // 最多包含3个规格值，为0表示不存在该规格
						stock_num: 110 // 当前 sku 组合对应的库存
					}],
					price: '1.00', // 默认价格（单位元）
					stock_num: 227, // 商品总库存
					collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
					none_sku: false, // 是否无规格商品
					messages: [{
						// 商品留言
						datetime: '0', // 留言类型为 time 时，是否含日期。'1' 表示包含
						multiple: '0', // 留言类型为 text 时，是否多行文本。'1' 表示多行
						name: '留言', // 留言名称
						type: 'text', // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
						required: '1', // 是否必填 '1' 表示必填
						placeholder: '' // 可选值，占位文本
					}],
					hide_stock: false // 是否隐藏剩余库存
				},
				goods: {
					// 商品标题
					title: '测试商品',
					// 默认商品 sku 缩略图
					picture: 'https://img.yzcdn.cn/1.jpg'
				},
				messageConfig: {
					// 图片上传回调，需要返回一个promise，promise正确执行的结果需要是一个图片url
					uploadImg: () => {
						return new Promise((resolve) => {
							setTimeout(() => resolve(
								'https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'), 1000);
						});
					},
					// 最大上传体积 (MB)
					uploadMaxSize: 3,
					// placeholder 配置
					placeholderMap: {
						text: 'xxx',
						tel: 'xxx',
					}
				}
			}
		},
		methods: {

		}
	})
</script>
